<template>
    <article class="f14">
        <div class="rr-hd f20">调整分佣比例</div>
        <section class="ub pt40">
            <el-form autoComplete="off" :model="formData" :rules="rules" ref="rermForm" size="small" label-width="180px">
                <el-form-item prop="account" label="被邀请人手机号：" class="mb30 f14">
                    <el-input type="number" v-model="formData.account" placeholder="无需输入区号" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item prop="percent" label="设置分佣比例：" class="mb30 f14">
                    <el-input type="number" :placeholder="rateData.minRate +  '%-' + rateData.inviteRate + '%'" v-model="formData.percent" clearable size="small"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-button type="primary" v-loading="loading" size="small" @click="submit">确认调整</el-button>
                </el-form-item>
            </el-form>
            <div class="ub-f1 pl100">
                <p class="f20 fb">说明</p>
                <div class="mt20 f14">
                    <p>1、使用此功能，可以直接为您的直邀好友开通代理权限。注意，非直接邀请的好友不能使用此功能。</p>
                    <p>2、分佣比例一经设置，只能调高，不能调低。</p>
                    <p>3、设置的分佣比例不得高于您自己的比例，可以一致。</p>
                    <p>4、代理分佣比例最低为20%。</p>
                    <p>5、BXMEX拥有最终解释权。</p>
                </div>
            </div>
        </section>

    </article>
</template>

<script>

import i18n from 'src/i18n.js'

import { validatePhone } from 'utils/validate'
import { APIgetInviteMyRate, APIgetInviteSetRate } from 'api'

export default {
    props: {
    },
    data(){
        const validateUsername = (rule, value, callback) => {
            if (!validatePhone(value)) {
                callback(new Error('请输入11位手机号'))
            } else {
                callback()
            }
        }
        const validateRate = (rule, value, callback) => {
            value = parseFloat(value || 0);
            if (value < this.rateData.minRate || value > this.rateData.inviteRate) {
                callback(new Error('您的分佣比例范围为' + this.rateData.minRate +  '-' + this.rateData.inviteRate))
            } else {
                callback()
            }
        }
        return {
            i18n,

            loading: false,


            rateData: {
                minRate: 20,
                inviteRate: 60
            },

            formData: {
                percent: '',
                account: ''
            },

            rules: {
                account: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername}],
                percent: [{ required: true, trigger: ['blur', 'change'], validator: validateRate}]
            },
        }
    },

    mounted(){
        this.init();
    },
   
    methods: {
        init(){
            this.getInviteMyRate();
        },
        getInviteMyRate(){
            APIgetInviteMyRate().then(res => {
                this.rateData = res.data;
            })
        },
        show(type){
            this.type = type;
            this.dialogVisible = true;
        },
        hide(){
            this.dialogVisible = false;
        },

        submit(){
            this.$refs.rermForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    const { account, percent} = this.formData;
                    let ops = {
                        account, 
                        rate: (percent/100).toFixed(2),
                        host: '6bbicon'
                    }
                    APIgetInviteSetRate(ops).then(res => {
                        this.loading = false;
                        this.$message({
                            type: 'success',
                            message: this.$t('trading.setSuccess')
                        });
                        location.reload();
                    }, err => {
                        this.loading = false;
                    })
                }
            })
        }
    }
}

</script>


<style lang="scss" scoped>
.rr-hd{
    padding: 20px 24px; font-size: 18px; font-weight: bold; border-bottom: 1px solid #e8e8e8;
}
</style>




